<template>
  <div>
    <h1>数字动画<text style="color: lightgreen;">❀❀❀❀❀❀❀❀❀❀❀</text></h1>
    <p>{{ timeLeft }}</p>
   
  </div>
</template>
 
<script>
import { ref, onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    const timer = ref(null);
    const timeLeft = ref(21111); // 初始时间设置为60秒
 
    const startTimer = () => {
      if (timer.value) return;
      timer.value = setInterval(() => {
        if (timeLeft.value > 0) {
          timeLeft.value++;
        } else {
          stopTimer();
        }
      }, 1);
    };
 
    const stopTimer = () => {
      if (timer.value) {
        clearInterval(timer.value);
        timer.value = null;
      }
    };
 
    onMounted(startTimer);
    onUnmounted(stopTimer);
 
    return {
      timeLeft,
      startTimer,
      stopTimer
    };
  }
};
</script>